<template>
  <div class="pageStyle">
    <ElDialog
      v-model="dialogVisible"
      :title="title"
      width="800"
      :before-close="handleClose"
    >
      <div class="searchTable">
        <ElRow class="search-color">
          <ElCol :span="12">
            <ElInput
              v-model="airportName"
              style="width: 70%"
              placeholder="请输入机场名称"
            />
          </ElCol>
          <ElCol :span="12" class="t-r">
            <ElButton class="b-r-4" type="primary" @click="search()"
              >查询</ElButton
            >
            <ElButton @click="resetForm()">重置</ElButton>
          </ElCol>
        </ElRow>
      </div>
      <div class="tablePage">
        <div style="margin-bottom: 20px">
          <ElTable :data="tableData" stripe style="width: 100%" row-key="id">
            <ElTable.TableColumn
              prop="airportName"
              label="机场名称"
              align="center"
            />
            <ElTable.TableColumn
              prop="description"
              label="机场描述"
              align="center"
            />
            <ElTable.TableColumn
              prop="status"
              label="机场状态"
              align="center"
            />
            <ElTable.TableColumn
              prop="droneNums"
              label="关联无人机数量"
              align="center"
            />
            <ElTable.TableColumn fixed="right" label="操作" align="center">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="rowClick(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </ElTable.TableColumn>
          </ElTable>
        </div>
        <div class="pagination">
          <ElPagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 80, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="handleClose">取消</ElButton>
          <ElButton type="primary" @click="submitForm(ruleFormRef)">
            确定
          </ElButton>
        </div>
      </template>
    </ElDialog>
  </div>
</template>
<script lang="ts" setup>
import {
  ElMessageBox,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadioGroup,
  ElRadio,
  ElMessage,
  ElSelect,
  ElOption,
  ElTreeSelect,
  ElTable,
  ElSwitch,
  ElPagination,
  ElRow,
  ElCol,
} from 'element-plus';
import { reactive, ref } from 'vue';
import { getAirportList } from '#/api/sys/equipment';
const emit = defineEmits(['airportRow']);
const dialogVisible = ref(false);
const title = ref('选择机场');
const id = ref('');
const airportName = ref('');
const tableData = ref([]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const search = async () => {
  const params = {
    airportName: airportName.value,
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  };
  try {
    const { data } = await getAirportList(params);
    if (data.records.length > 0) {
      data.records.map((item) => {
        item.status = item.status + '';
      });
      tableData.value = data.records;
      total.value = data.total;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (err) {
    ElMessage.error('加载数据失败');
  }
};
const addDialog = () => {
  dialogVisible.value = true;
  search();
};

const editDialog = (obj) => {
  dialogVisible.value = true;
  id.value = obj.id;
  search();
};

defineExpose({ addDialog, editDialog });
const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

const submitForm = async (formEl) => {
  dialogVisible.value = false;
  // if (!formEl) return;
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     // 添加成功
  //     ElMessage({
  //       plain: true,
  //       message: '添加成功',
  //       type: 'success',
  //     });
  //   } else {
  //     console.log('error submit!', fields);
  //   }
  // });
};

const resetForm = (formEl) => {
  airportName.value = '';
  currentPage.value = 1;
  search();
};
const rowClick = (item) => {
  emit('airportRow', item);
  dialogVisible.value = false;
};

const handleClose = (done: () => void) => {
  dialogVisible.value = false;
};
</script>
<style lang="scss" scoped>
.tablePage {
  height: 50vh;
  margin-top: 20px;
}

.pageStyle {
  height: auto !important;
}
</style>
